<template>
  <div v-loading="pageLoading">
    <el-row :gutter="20">
      <el-col :span="20">
        <el-row class="gl_mb_5">
          <el-col :span="12">
            <span class="club_label" style="font-weight:900;font-size:16px">当前所属单位：</span>
            <span class="club_value">{{ addressDataForCheck(info.provinceCode, info.cityCode, info.countyCode) }}</span>
          </el-col>
          <el-col :span="12">
            <span class="club_label" style="font-weight:900;font-size:16px">团体机构区域所属：</span>
            <span class="club_value">{{ addressDataForCheck(info.teamprovinceCode, info.teamcityCode, info.teamcountyCode) }}</span>
          </el-col>
        </el-row>
        <el-row class="gl_mb_5">
          <el-col :span="12">
            <div style="display:flex">
              <span class="club_label" style="display:inline-block;width:80px">机构名称：</span>
              <span class="club_value text_overflow">{{ info.displayName }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <span class="club_label">团体机构名称：</span>
            <span class="club_value">{{ info.teamname }}</span>
          </el-col>
        </el-row>
        <el-row class="gl_mb_5">
          <el-col :span="12">
            <span class="club_label">道馆管理系统版本号：</span>
            <span class="club_value">{{ clubEdition.edition ? clubEdition.edition.name : '-' }}</span>
          </el-col>
        </el-row>
        <el-row class="gl_mb_5">
          <el-col :span="24">
            <span class="club_label">管理账号：</span>
            <span class="club_value">{{ clubEdition.phoneNumber || '-' }}</span>
          </el-col>
        </el-row>
        <el-row class="gl_mb_5">
          <el-col :span="24">
            <span class="club_label">到期时间：</span>
            <span class="club_value">
              {{ clubEdition.validTo ? clubEdition.validTo.slice(0, 10) : '' }}
              {{ clubEdition.validTo ? clubEdition.validTo.slice(11, 19) : '' }}
            </span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import {
  api_GET_EditionByOuidOrganizationUnitId
} from '@/extend/api/swaggerApi/identity.js';
export default {
  props: {
    info: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data () {
    return {
      clubEdition: {},
      pageLoading: false
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      cache: state => state.dict.cache
    })
  },
  watch: {
    'info.id': {
      immediate: true,
      handler (val) {
        if (val) {
          this.getClubEditionById(val, {
            IncludeEdition: true,
            IncludeOrganizationUnit: true,
            IncludeDeleted: true
          });
        }
      }
    }
  },
  created() {
    this.getDict();
    this.getDictByType(['district']);
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    // 查询指定机构的版本
    getClubEditionById (id, qo) {
      this.pageLoading = true;
      api_GET_EditionByOuidOrganizationUnitId(id, qo)
        .then(
          res => {
            this.pageLoading = false;
            this.clubEdition = res || {};
          }
        )
        .catch(
          error => {
            this.pageLoading = false;
            this.$message({
              message: `版本信息获取失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    },
    reGetClubEditionById () { // 外部调用
      this.getClubEditionById(this.info.id, {
        IncludeEdition: true,
        IncludeOrganizationUnit: true,
        IncludeDeleted: true
      });
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 处理省市区
    addressDataForCheck (_provinceCode, _cityCode, _countyCode) {
      let _provinceData;
      let _cityData;
      let _countyData;
      if (_provinceCode && this.cache.district) {
        _provinceData = this.cache.district.find(item => item.code === _provinceCode);
      }
      if (_cityCode && _provinceData) {
        _cityData = _provinceData.children.find(item => item.code === _cityCode);
      }
      if (_countyCode && _cityData) {
        _countyData = _cityData.children.find(item => item.code === _countyCode);
      }
      _provinceData = _provinceData ? _provinceData.name : '';
      _cityData = _cityData ? _cityData.name : '';
      _countyData = _countyData ? _countyData.name : '';
      return `${_provinceData} ${_cityData} ${_countyData}`;
    }
  }
};
</script>

<style lang="scss" scoped>
  .club_logo {
    width: 200px;
    height: 200px;
    border-radius: 4px;
  }
  .club_label {
    font-size: 14px;
    line-height: 32px;
    margin-right: 5px;
    color: #606266;
  }
  .club_value {
    font-size: 14px;
    line-height: 32px;
    color: #383838;
  }
  .text_overflow {
    display: inline-block;
    width: 438px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  </style>
